<template>
  <div class="account-settings-info-view">
        <a-form layout="vertical">
          <a-row :gutter="16">
            <a-col :md="4" :lg="4">
            <a-form-item
              label="WWF$t('settingsRechargeScene.wxzf')"
            >
              <a-switch @change="changeScene1" checkedChildren="{{ $t('settingsRechargeScene.k') }}" unCheckedChildren="{{ $t('settingsRechargeScene.g') }}" v-model="scene.wwf_wx" />
            </a-form-item>
            </a-col>
            <a-col :md="4" :lg="4">
              <a-form-item
                label="WWF$t('settingsRechargeScene.zfbzf')"
              >
                <a-switch @change="changeScene2" checkedChildren="{{ $t('settingsRechargeScene.k') }}" unCheckedChildren="{{ $t('settingsRechargeScene.g') }}" v-model="scene.wwf_alipay"  />
              </a-form-item>
            </a-col>
            <a-col :md="4" :lg="4">
              <a-form-item
                label="$t('settingsRechargeScene.rfzfbzf')"
              >
                <a-switch @change="changeScene3" checkedChildren="{{ $t('settingsRechargeScene.k') }}" unCheckedChildren="{{ $t('settingsRechargeScene.g') }}" v-model="scene.rong_alipay" />
              </a-form-item>
            </a-col>
            <a-col :md="4" :lg="4">
              <a-form-item
                label="$t('settingsRechargeScene.yxkzf')"
              >
                <a-switch @change="changeScene4" checkedChildren="{{ $t('settingsRechargeScene.k') }}" unCheckedChildren="{{ $t('settingsRechargeScene.g') }}" v-model="scene.bank" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-form-item>
            <a-button :loading="loading" @click="handleClickSave" type="primary">{{ $t('settingsRechargeScene.bc') }}</a-button>
          </a-form-item>
        </a-form>
  </div>
</template>

<script>

export default {
  components: {
  },
  data () {
    return {
      // cropper
      data: {},
      loading: false,
      scene: {
        wwf_wx: false,
        wwf_alipay: false,
        rong_alipay: false,
        bank: false
      }
    }
  },
  methods: {
    changeScene1 (flag) {
      this.scene.wwf_wx = flag
    },
    changeScene2 (flag) {
      this.scene.wwf_alipay = flag
    },
    changeScene3 (flag) {
      this.scene.rong_alipay = flag
    },
    changeScene4 (flag) {
      this.scene.bank = flag
    },
    handleClickSave () {
      this.loading = true
      this.$http.post('/system/save', this.$qs.stringify({
        row: this.$qs.stringify({
          'pay_scene.wwf_wx': this.scene.wwf_wx ? 1 : 0,
          'pay_scene.wwf_alipay': this.scene.wwf_alipay ? 1 : 0,
          'pay_scene.rong_alipay': this.scene.rong_alipay ? 1 : 0,
          'pay_scene.bank': this.scene.bank ? 1 : 0
        })
      })).then(res => {
        if (res.code === 0) {
          this.$notification.success({
            message: this.$t('settingsRechargeScene.cg'),
            description: res.msg
          })
        } else {
          this.$notification.error({
            message: this.$t('settingsRechargeScene.sb'),
            description: res.msg
          })
        }
      }).catch(err => {
        this.$notification.error({
          message: this.$t('settingsRechargeScene.sb'),
          description: err.message
        })
      }).then(() => {
        this.loading = false
      })
    },
    getData () {
      this.$http.get('/system/list').then((res) => {
        this.data = res
        this.scene.wwf_alipay = res['pay_scene.wwf_alipay'] != 0 ? true: false
        this.scene.wwf_wx = res['pay_scene.wwf_wx'] != 0 ? true: false
        this.scene.rong_alipay = res['pay_scene.rong_alipay'] != 0 ? true: false
        this.scene.bank = res['pay_scene.bank'] != 0 ? true: false
      })
    }
  },
  created () {
    this.getData()
  }
}
</script>

<style lang="less" scoped>

  .avatar-upload-wrapper {
    height: 200px;
    width: 100%;
  }

  .ant-upload-preview {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 180px;
    border-radius: 50%;
    box-shadow: 0 0 4px #ccc;

    .upload-icon {
      position: absolute;
      top: 0;
      right: 10px;
      font-size: 1.4rem;
      padding: 0.5rem;
      background: rgba(222, 221, 221, 0.7);
      border-radius: 50%;
      border: 1px solid rgba(0, 0, 0, 0.2);
    }
    .mask {
      opacity: 0;
      position: absolute;
      background: rgba(0,0,0,0.4);
      cursor: pointer;
      transition: opacity 0.4s;

      &:hover {
        opacity: 1;
      }

      i {
        font-size: 2rem;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -1rem;
        margin-top: -1rem;
        color: #d6d6d6;
      }
    }

    img, .mask {
      width: 100%;
      max-width: 180px;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
    }
  }
</style>
